<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.UI.WebControls" Assembly="DotNetNuke.WebControls" %>
<%@ Page Language="vb" AutoEventWireup="false" CodeFile="TabStripAlignment.aspx.vb" Inherits="TabStripAlignment" MasterPageFile="~/MasterPage.master"%>
<%@ Register TagPrefix="code" TagName="view" Src="..\usercontrols\codeview.ascx" %>
<asp:content id="header" contentplaceholderid="HeaderPlaceHolder" runat="Server">
    <link href="../css/tabstrip.css" type="text/css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <p class="sampledescription">
        This sample demonstrates how you can position the tabs on the tabstrip. The TabAlignment
        property allows for four settings (Top, Left, Right, Bottom). However, there are
        actually only two ways to render the html. Either the Tabs will render first (Top,
        Left) or the content will render first (Right, Bottom). In order to render the tabs
        vertically, CSS will need to be applied to the labels. In a similar manner, the
        tabs as a whole and and the content area can be considered to be a grouping that
        renders horizontally or vertically. With the tabs on the top or bottom, this would
        be considered vertical, with the tabs on the left or right this would be considered
        horizontal. In order apply our css to these groupings two more CSS properties (CssContentContainer
        and CssTabContainer) have been introduced.
    </p>
    <table cellspacing="0" cellpadding="0" border="1" width="800px">
        <tr valign="top">
            <td colspan="2">
                <dnn:DNNTabStrip ID="MyDNNTabStrip" runat="server" SelectedIndex="0" TabRenderMode="All" 
                    DefaultContainerCssClass="tabcontainer" 
                    DefaultLabel-CssClass="tablabel" DefaultLabel-CssClassHover="tablabelhover" DefaultLabel-CssClassSelected="tablabelselected">
                    <dnn:DNNTab Label-Text="tab 1" ID="tab1">
                        Tab 1
                    </dnn:DNNTab>
                    <dnn:DNNTab Label-Text="tab 2" ID="tab2">
                        Tab 2
                    </dnn:DNNTab>
                </dnn:DNNTabStrip>
            </td>
        </tr>
        <tr>
            <td class="ControlDesc">
                TabAlignment</td>
            <td width="100%">
                <asp:DropDownList ID="ddlTabAlignment" runat="server" AutoPostBack="True">
                    <asp:ListItem Selected="True" Value="Top">Top</asp:ListItem>
                    <asp:ListItem Value="Left">Left</asp:ListItem>
                    <asp:ListItem Value="Right">Right</asp:ListItem>
                    <asp:ListItem Value="Bottom">Bottom</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
    </table>
    <code:view ID="cv" runat="server" ImageUrl="~/images/icon_html.gif`~/images/icon_css.gif`~/images/icon_html.gif"
        CodeFile="~/Samples/TabStripAlignment/htm.htm`~/Samples/TabStripAlignment/css.htm`~/Samples/TabStripAlignment/vb.htm"
        ToolTip="Markup`CSS`VB" />
</asp:Content>
